<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#main{
		overflow: hidden;
		border: 5px solid purple;
		width: 1300px;

	}
	#main .list{
		width: 300px;
		float: left;
		border: 3px solid green;
		margin-left: 15px;
	}
	#main .list img{
		margin-bottom: 5px;
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		function zhuijia(){
			// 抽取随机数
			var num = 	Math.ceil(Math.random()*119);
			var newImg = '<img src="images/'+num+'.jpg" />';//组合新节点
			var min = 0;//默认0号div高度最小
			// 循环.list，获得高度最短的div的序号
			$('#main .list').each(function(i){
				if($('#main .list').eq(i).height()<$('#main .list').eq(min).height()){
					min = i;
				}
			})
			$('#main .list').eq(min).append(newImg);
		}
		// 给滚动条加滚动事件
		$(window).scroll(function(){
			// 获得内容总高度
			var main_height = $('#main').height();
			// 获得可视区域高度
			var window_height = $(window).height();
			// 获得已经滚动上去的高度
			var s_height = $(document).scrollTop();
			// 计算距离底部的距离
			// 总共高度 - 可视区域高度 - 已经滚动上去的高度
			var bottom = main_height - window_height - s_height;
			document.title = bottom;
			if(bottom<=200){//判断是否到底了，如果到底了，就追加新内容
				zhuijia();
				zhuijia();
				zhuijia();
				zhuijia();
				zhuijia();
				zhuijia();
				zhuijia();
				zhuijia();
				zhuijia();
				zhuijia();
				zhuijia();
			}
		})
	})
</script>
</head>

<body>

<div id="main">
	<div class="list">
		<img src="images/11.jpg" alt="" />
		<img src="images/12.jpg" alt="" />
		<img src="images/13.jpg" alt="" />
		<img src="images/14.jpg" alt="" />
		<img src="images/15.jpg" alt="" />
		<img src="images/16.jpg" alt="" />
		<img src="images/17.jpg" alt="" />
		<img src="images/18.jpg" alt="" />
		<img src="images/19.jpg" alt="" />
	</div>
	<div class="list">
		<img src="images/21.jpg" alt="" />
		<img src="images/22.jpg" alt="" />
		<img src="images/23.jpg" alt="" />
		<img src="images/24.jpg" alt="" />
		<img src="images/25.jpg" alt="" />
		<img src="images/26.jpg" alt="" />
		<img src="images/27.jpg" alt="" />
		<img src="images/28.jpg" alt="" />
		<img src="images/29.jpg" alt="" />
	</div>
	<div class="list">
		<img src="images/31.jpg" alt="" />
		<img src="images/32.jpg" alt="" />
		<img src="images/33.jpg" alt="" />
		<img src="images/34.jpg" alt="" />
		<img src="images/35.jpg" alt="" />
		<img src="images/36.jpg" alt="" />
		<img src="images/37.jpg" alt="" />
		<img src="images/38.jpg" alt="" />
		<img src="images/39.jpg" alt="" />
	</div>
	<div class="list">
		<img src="images/41.jpg" alt="" />
		<img src="images/42.jpg" alt="" />
		<img src="images/43.jpg" alt="" />
		<img src="images/44.jpg" alt="" />
		<img src="images/45.jpg" alt="" />
		<img src="images/46.jpg" alt="" />
		<img src="images/47.jpg" alt="" />
		<img src="images/48.jpg" alt="" />
		<img src="images/49.jpg" alt="" />
	</div>

</div>





</body>
</html>
